<template>
  <div>
    <div class="main-content user-login-dialog">
      <div class="info">
        <div>
          <div class="title">让专业的来！</div>
          <div class="sub-title">
            使用及时通后台管理，让你管理物流超有效率！
          </div>
          <img style="margin-top: 50px" src="@/assets/manage-login.svg" />
        </div>
      </div>
      <div class="login-box">
        <div class="title">{{ loginTitle }}</div>
        <UserLogin
          hideRegister
          @success="successEvent"
          :ref="(v) => (loginRef = v)"
        ></UserLogin>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import UserLogin from "@/components/login/UserLogin.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import request from "@/public/request";
import { ElLoading } from "element-plus";

const store = useStore();
const router = useRouter();
const loginRef = ref(null);

const loginTitle = computed(() => {
  if (loginRef.value) {
    return loginRef.value.title;
  }
});

const successEvent = async () => {
  // 如果有后台账号直接登录后台
  const loading = ElLoading.service({ lock: true });
  try {
    router.push("/internal");
  } catch {
  } finally {
    loading.close();
  }
};

onMounted(() => {
  if (
    localStorage.getItem("jst:token") &&
    localStorage.getItem("jst:token") != ""
  ) {
    router.push("/internal");
  }
});
</script>

<style lang="scss" scoped>
.main-content {
  margin-top: 110px;
  display: flex;
  justify-content: space-between;
  .info {
    height: 405px;
    width: 493px;
    display: flex;
    .title {
      font-size: 32px;
      color: #409eff;
      letter-spacing: 0;
      text-align: center;
      text-align: left;
    }
    .sub-title {
      font-size: 18px;
      color: #969799;
      letter-spacing: 0;
      text-align: left;
    }
  }
  .login-box {
    width: 414px;
    height: 100%;
    background-color: #fff;
    padding: 24px 32px 32px 32px;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    position: relative;

    .title {
      font-size: 20px;
      color: #3c4144;
      letter-spacing: 0;
      text-align: center;
      margin-bottom: 24px;
    }
  }
}
</style>
